<template>
    <div>
        <roofVue title="积分商品兑换"></roofVue>
        <!--  轮播 indicator-color="white"-->
        <van-swipe :autoplay="3000" @change="onChange" v-if="setimages.length > 0">
            <van-swipe-item v-for="(i, index) in setimages" :key="index">
                <img style="width: 100%; height: 70vw" :src="imgurl + i" alt />
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/{{ setimages.length }}</div>
            </template>
        </van-swipe>
        <div v-else style="padding: 1rem">
            <van-image
                style="width: 100%"
                :src="imgurl + setpro.productDetail.defaultImg"
                fit="contain"
            />
        </div>
        <van-cell-group inset>
            <van-cell>
                <template #title>
                    <span style="font-size: 28px; color: orange">{{ setpro.jifen }}积分</span>
                </template>
                <div class="top">
                    <div>
                        <span>31</span>
                        <br />
                        <span>浏览</span>
                    </div>
                    <div>
                        <span>11</span>
                        <br />
                        <span>销量</span>
                    </div>
                </div>
            </van-cell>
            <van-cell :title="setpro.productDetail.name"></van-cell>
        </van-cell-group>
        <van-cell-group inset style="margin: 0.5rem">
            <van-cell title="选择规格" is-link />
        </van-cell-group>

        <!-- 图文详情 -->
        <div style="padding: 0.5rem">
            <van-panel title="图文详情">
                <div>
                    <span v-html="setpro.productDetail.explain"></span>
                    <van-image
                        style="width: 100%"
                        :src="imgurl + setpro.productDetail.defaultImg"
                        fit="contain"
                    />
                </div>
            </van-panel>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-icon
                icon="star-o"
                text="收藏"
                color="#ff5000"
                @click="shouchang()"
                v-if="shoubool"
            />
            <van-goods-action-icon
                icon="star"
                text="已收藏"
                color="#ff5000"
                @click="
                $dialog.alert({
                    message: '已经收藏过了',
                    theme: 'round-button',
                })"
                v-else
            />
            <van-goods-action-button type="danger" text="立即兑换" @click="onclick" />
        </van-goods-action>
    </div>
</template>

<script>
import roofVue from "../other/roof.vue"
export default {
    data() {
        return {
            current: 0,
            setimages: [],
            setpro: null,
            shoubool: true,
        }
    },
    methods: {
        // 获取商品图片和详情
        async getpro() {
            let res = await this.$post(
                this.url + "product/get_images/" + this.setpro.productId
            );
            console.log(res);
            if (res.errorCode == "0" && res.data) {
                this.setimages = res.data.images;
                // console.log(this.setimages);
            }
        },
        // 收藏
        shouchang() {
            if (!this.$store.state.user) {
                this.$toast.fail("你还未登录，请先登录");
                this.$router.replace("/Login");
                return
            }
            this.$post(this.url + "user/add/wishlist", {
                userId: this.$store.state.user.id,
                productId: this.setpro.productId,
            }).then((res) => {
                console.log(res);
                if (res.errorCode == "0") {
                    this.$notify({ type: "success", message: "收藏成功" });
                    this.get();
                }
            });
        },
        // 查询收藏
        async get() {
            let res2 = await this.$post(this.url + "user/wishlist", {
                userId: this.$store.state.user.id,
            });
            if (res2.errorCode == "0") {
                console.log(res2);
                res2.data.wishlist.map((nus) => {
                    if (nus.product.id == this.setpro.productId) {
                        this.shoubool = false;
                    }
                });
            }
        },
        // 兑换
        onclick() {
            if (!this.$store.state.user) {
                this.$toast.fail("你还未登录，请先登录");
                this.$router.replace("/Login");
                return
            }
            this.$post(this.url2 + "/jifen/convertProduct", {
                userId: this.$store.state.user.id,
                productId: this.setpro.productDetail.id,
                jifen: this.setpro.jifen
            }).then(res => {
                console.log(res);
                if (res.errorCode == '0') {
                    this.$dialog.alert({
                        message: '兑换成功',
                    })
                } else {
                    this.$dialog.alert({
                        message: '抱歉，你的积分不够无法兑换',
                    })
                }
            })
        }
    },
    components: {
        roofVue
    }, created() {
        this.setpro = this.Sto.Session.get("jifenproduct")
        console.log(this.setpro);
        this.getpro()
        this.get()
    },
}
</script>

<style  scoped>
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}
.top {
    display: flex;
    text-align: center;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 8px;
    z-index: 1;
}
.top > div {
    margin: 0 0.2rem;
    line-height: 15px;
}
</style>